import React, { useState } from "react"
import { useComponentStore } from '../../stores/components'
import ComponentAttr from "./ComponentAttr"
import ComponentEvent from "./ComponentEvent"
import ComponentStyle from "./ComponentStyle"
import { Segmented } from "antd"


const Setting: React.FC = () => {

  const { curComponentId } = useComponentStore()

  const [key, setKey] = useState<string>('属性')

  if (!curComponentId) return null


  return <div>
    <Segmented value={key} onChange={setKey} block options={['属性', '样式', '事件']} />
    <div className="pt-[20px]">
      {
        key === '属性' && <ComponentAttr />
      }
      {
        key === '样式' && <ComponentStyle />
      }
      {
        key === '事件' && <ComponentEvent />
      }
    </div>
  </div>
}

export default Setting